<template>
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-start">
      <view class="title">{{ title }}</view>
    </view>
    <view class="cu-content flex flex-wrap align-stretch">
      <view class="check-row grid" :class="'col-' + colCount">
        <view
          class="check-item flex justify-center"
          v-for="(item, index) in checkList"
          :key="index"
        >
          <view
            @tap="biliChange(item)"
            class="check-button"
            :class="bilis.indexOf(item) > -1 ? 'checked' : ''"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <view class="tool-row flex justify-between align-center">
        <button class="cu-btn bg-blue" @tap="selectAll">全选</button>
        <button class="cu-btn bg-white line-blue-button" @tap="antiSelect">
          反选
        </button>
        <button class="cu-btn bg-white line-red-button" @tap="cleanAll">
          清除
        </button>
      </view>
    </view>
    <view class="cu-bar bg-white">
      <view class="action margin-0 flex-sub" @tap="onCancelValue">取消</view>
      <view
        class="action margin-0 flex-sub text-blue solid-left"
        @tap="onPopValueOutside"
      >
        确定
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: [String],
      default: '标题',
    },
    data: {
      type: [Array],
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      colCount: 3,
      bilis: [],
      checkList: ['0:5', '1:4', '2:3', '3:2', '4:1', '5:0'],
    }
  },
  created() {},
  methods: {
    biliChange(bili) {
      let index = this.bilis.indexOf(bili)
      if (index > -1) {
        this.bilis.splice(index, 1)
      } else {
        this.bilis.push(bili)
      }
    },
    selectAll() {
      this.bilis = ['0:5', '1:4', '2:3', '3:2', '4:1', '5:0']
    },
    antiSelect() {
      let newBilis = ['0:5', '1:4', '2:3', '3:2', '4:1', '5:0'].filter(
        i => this.bilis.indexOf(i) === -1
      )
      this.bilis = newBilis
    },
    cleanAll() {
      this.bilis = []
    },
    onCancelValue() {
      this.bilis = this.data
      this.$emit('hide')
    },
    onPopValueOutside() {
      this.$emit('confirm', this.bilis)
    },
  },
}
</script>

<style lang="scss" scoped>
.cu-dialog {
  border-radius: 20upx;
  .cu-bar {
    padding: 30upx 40upx;
    background-color: #f9faff;
  }
  .title {
    font-size: 36upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 50upx;
  }
  .cu-content {
    background-color: #ffffff;
    height: 350upx;
    padding: 30upx 40upx 0;
    .check-row {
      width: 100%;
      height: 160upx;
      // padding: 0 20upx;
      .check-item {
        .check-button {
          width: 120upx;
          height: 60upx;
          line-height: 60upx;
          text-align: center;
          color: #71808a;
          background: #edf2f6;
          border-radius: 30upx;
          border: 1px solid #95a6b2;
          &.checked {
            background-color: #2999ff;
            color: #ffffff;
          }
        }
      }
    }
    .tool-row {
      width: 100%;
      height: 128upx;
      border-top: 1px solid #edf2f6;
      .cu-btn {
        width: 160upx;
        height: 60upx;
        border-radius: 30upx;
        &.line-blue-button {
          border: 1px solid #2999ff;
          color: #2999ff;
        }
        &.line-red-button {
          border: 1px solid #da2626;
          color: #da2626;
        }
      }
    }
  }
}
</style>
